<template>
  <view class="candidate-container">
    <!-- 加载动画 -->
    <view class="loading-mask" v-if="isLoading">
      <view class="loading-container">
        <view class="loading-spinner"></view>
        <text class="loading-text">加载候选人中...</text>
      </view>
    </view>

    <!-- 候选人内容 -->
    <view v-if="!isLoading">
          <!-- 顶部标签栏 -->
    <view class="tab-bar">
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'etiquette' }"
        @click="switchTab('etiquette')"
      >
        <text>礼仪</text>
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'parttime' }"
        @click="switchTab('parttime')"
      >
        <text>兼职</text>
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'leader' }"
        @click="switchTab('leader')"
      >
        <text>带队</text>
      </view>
    </view>
      
      <view class="candidate-list">
        <!-- 候选人卡片 -->
        <view class="candidate-card" v-for="(candidate, index) in filteredRoleList" :key="index" :class="{ 'expanded': expandedIndex === index }">
          <view class="card-content">
            <!-- 头像 -->
            <image class="avatar" :src="candidate && candidate['687633c7ef700e94a0d82b59'] ? JSON.parse(candidate['687633c7ef700e94a0d82b59'])[0] : '/static/logo.png'" mode="aspectFill"></image>
            <view class="info">
              <view class="name-gender">
                <!-- 姓名 -->
                <text class="name">{{candidate && candidate['686e0c6fd9147824a38a6294'] || '姓名'}}</text>
                <text class="gender" :class="{ 'male': candidate && candidate['686e0c6fd9147824a38a6295'][0] === '0c0fb821-0b64-4f7f-beb3-2f456c973ff9', 'female': candidate && candidate['686e0c6fd9147824a38a6295'][0] !== '0c0fb821-0b64-4f7f-beb3-2f456c973ff9' }">{{ candidate && candidate['686e0c6fd9147824a38a6295'][0] === "0c0fb821-0b64-4f7f-beb3-2f456c973ff9" ? '♂' : '♀' }}</text>
              </view>
              <view class="location">
                <!-- 角色 -->
                <text class="job">{{candidate && candidate.job || '礼仪'}}</text>
                <text class="separator">|</text>
                <!-- 接单地址 -->
                <text class="city">{{candidate && candidate['68b121a8823eff0bd6132ac2'] || '---'}} · {{ candidate && candidate['686e0f429104eb90ad4247a4'] === "470a70a3-4fc3-4c4c-bea6-3bd2a2b7556c" ? "全国" : "仅本地" }}</text>
              </view>
            </view>
          </view>
          
          <!-- 展开后显示的内容 -->
          <view class="expanded-content" v-if="expandedIndex === index">
            <!-- 分隔线 -->
            <view class="divider"></view>
            
            <!-- 展开内容标签栏 -->
            <view class="expanded-tab-bar">
              <view 
                class="expanded-tab-item" 
                :class="{ active: expandedActiveTab === 'detail' }"
                @click="switchExpandedTab('detail')"
              >
                <text>详情</text>
              </view>
              <view 
                class="expanded-tab-item" 
                :class="{ active: expandedActiveTab === 'photos' }"
                @click="switchExpandedTab('photos')"
              >
                <text>模卡</text>
              </view>
            </view>
            
            <!-- 详情标签页 -->
            <view class="expanded-tab-content" v-if="expandedActiveTab === 'detail'">
              <!-- 形象信息 -->
              <view class="section">
                <view class="section-title">
                  <view class="section-title-bar"></view>
                  <text>形象信息</text>
                </view>
                <view class="physical-info">
                  <view class="info-item">
                    <text class="info-value">{{candidate['686e0f429104eb90ad4247a5'] || '---'}}cm</text>
                    <text class="info-label">身高</text>
                  </view>
                  <view class="info-item">
                    <text class="info-value">{{candidate['686e0f429104eb90ad4247a6'] || '---'}}kg</text>
                    <text class="info-label">体重</text>
                  </view>
                  <view class="info-item">
                    <text class="info-value">{{candidate['688051358c409b88b8519759'] || '---'}}</text>
                    <text class="info-label">三围</text>
                  </view>
                  <view class="info-item">
                    <text class="info-value">{{candidate['686e0f429104eb90ad4247a8'] || '---'}}</text>
                    <text class="info-label">鞋码</text>
                  </view>
                </view>
              </view>
              
              <!-- 身份标签 -->
              <view class="section">
                <view class="section-title">
                  <view class="section-title-bar"></view>
                  <text>身份标签</text>
                </view>
                <view class="tags">
                  <view class="tag" v-for="tag in (candidate['68a2c617703512ca0fc111e3'] || [])" :key="tag">{{ tag }}</view>
                  <view class="no-tags" v-if="!candidate['68a2c617703512ca0fc111e3'] || candidate['68a2c617703512ca0fc111e3'].length === 0">
                    <text>暂无标签</text>
                  </view>
                </view>
              </view>

                 <!-- 形象照片 -->
            <view class="section">
              <view class="section-title">
                <view class="section-title-bar"></view>
                <text>形象照片</text>
              </view>
              
              <!-- 解析照片数据 -->
              <view class="photos" :class="getLayoutClass(candidate)">
                <!-- 视频 -->
                <view class="video-container" v-if="hasVideo(candidate)">
                  <video 
                    :src="getVideoUrl(candidate)" 
                    controls
                    object-fit="cover"
                    show-center-play-btn="true"
                    show-play-btn="true"
                    enable-progress-gesture="true"
                    show-fullscreen-btn="true"
                    show-snapshot-btn="false"
                    @error="videoError"
                    @load="videoLoad"
                  ></video>
                </view>
                
                <!-- 照片 -->
                <view class="photo-container" :class="{'with-video': hasVideo(candidate)}">
                  <template v-if="getPhotos(candidate).length > 0">
                    <image 
                      v-for="(photo, photoIndex) in getPhotos(candidate)" 
                      :key="photoIndex"
                      :src="photo" 
                      mode="aspectFill"
                      class="photo-item"
                      @error="photoError"
                      @click="previewImage(photo, getPhotos(candidate))"
                    ></image>
                  </template>
                  <view class="no-photo" v-else>
                    <text>暂无照片</text>
                  </view>
                </view>
              </view>
              
              <view class="collapse-btn">
                <text>收起</text>
              </view>
            </view>

            </view>
            
            <!-- 模卡标签页 -->
            <view class="expanded-tab-content" v-if="expandedActiveTab === 'photos'">
              <view class="section">
                <view class="section-title">
                  <view class="section-title-bar"></view>
                  <text>模卡</text>
                </view>
                
                <!-- 模卡图片 -->
                <view class="model-card-container">
                  <template v-if="getModelCard(candidate)">
                    <image 
                      :src="getModelCard(candidate)" 
                      mode="aspectFill"
                      class="model-card-image"
                      @error="modelCardError"
                      @click="previewImage(getModelCard(candidate), [getModelCard(candidate)])"
                    ></image>
                  </template>
                  <!-- <view class="no-model-card" v-else>
                    <text>暂无模卡</text>
                  </view> -->
                </view>
              </view>
            </view>
            

          </view>
          
          <view class="expand-btn" :class="{ 'collapsed': expandedIndex === index }" @click="toggleExpand(index)">
            <image class="icon-down" :src="expandedIndex === index ? '/static/candidate-icons/up.png' : '/static/candidate-icons/down.png'" mode="aspectFit"></image>
            <text>{{expandedIndex === index ? '收起' : '展开'}}</text>
          </view>
          <view class="checkbox" :class="{ checked: candidate && candidate['68761720096a775fc5332e94'] == '已选中' }" @click="toggleSelect(index)">
            <text v-if="candidate && candidate['68761720096a775fc5332e94'] == '已选中'" class="icon-check">✓</text>
          </view>
        </view>

        
      </view>
      

      
      <!-- 筛选条件栏 -->
      <view class="filter-bar" v-if="showFilterBar">
        <text class="filter-bar-text">筛选条件: 普通话 | 身高{{heightRange.min}}-{{heightRange.max}}cm 体重{{weightRange.min}}-{{weightRange.max}}kg</text>
      </view>
      
      <view class="footer">
      
        <view class="recommend-btn" @click="goToQuotation">
          <text>添加简历</text>
        </view>
      </view>
    </view>
    
    <!-- 筛选弹框 -->
    <view class="filter-modal" v-if="showFilterModal" :class="{ closing: filterModalClosing }" @click="closeFilterModal">
      <view class="filter-content" :class="{ closing: filterModalClosing }" @click.stop>
        <!-- 弹框头部 -->
        <view class="filter-header">
          <text class="filter-title">条件筛选</text>
          <view class="close-btn" @click="closeFilterModal">
            <text>×</text>
          </view>
        </view>
        
        <!-- 筛选内容 -->
        <view class="filter-body">
          <!-- 标签筛选区 -->
          <view class="tag-filter-section">
            <view class="tag-filter-header">
              <text class="tag-filter-title">标签筛选</text>
              <view class="tag-dropdown-container" @click="showTagDropdown = !showTagDropdown">
                <view class="tag-dropdown-btn">
                  <text class="tag-dropdown-text">标准普通话</text>
                </view>
                <image class="tag-dropdown-arrow" src="/static/candidate-icons/right.png" mode="aspectFit"></image>
              </view>
            </view>
          </view>
          
          <!-- 分隔线 -->
          <view class="filter-divider"></view>
          
          <!-- 条件筛选区 -->
          <view class="condition-filter-section">
            <text class="condition-filter-title">条件筛选</text>
            
            <!-- 身高筛选 -->
            <view class="slider-section">
              <view class="slider-header">
                <text class="slider-label">身高</text>
                <text class="slider-value">{{heightRange.min}} - {{heightRange.max}} CM</text>
              </view>
              <view class="slider-container">
                <view class="slider-wrapper">
                  <view class="slider-track"></view>
                  <view class="slider-range" :style="heightRangeStyle"></view>
                  <view class="slider-thumb slider-thumb-min" :style="heightMinThumbStyle" @touchstart="startDragHeight('min', $event)" @touchmove="dragHeight('min', $event)" @touchend="endDrag"></view>
                  <view class="slider-thumb slider-thumb-max" :style="heightMaxThumbStyle" @touchstart="startDragHeight('max', $event)" @touchmove="dragHeight('max', $event)" @touchend="endDrag"></view>
                </view>
                <view class="slider-values">
                  <text class="slider-min">100</text>
                  <text class="slider-max">300CM</text>
                </view>
              </view>
            </view>
            
            <!-- 体重筛选 -->
            <view class="slider-section">
              <view class="slider-header">
                <text class="slider-label">体重</text>
                <text class="slider-value">{{weightRange.min}} - {{weightRange.max}} KG</text>
              </view>
              <view class="slider-container">
                <view class="slider-wrapper">
                  <view class="slider-track"></view>
                  <view class="slider-range" :style="weightRangeStyle"></view>
                  <view class="slider-thumb slider-thumb-min" :style="weightMinThumbStyle" @touchstart="startDragWeight('min', $event)" @touchmove="dragWeight('min', $event)" @touchend="endDrag"></view>
                  <view class="slider-thumb slider-thumb-max" :style="weightMaxThumbStyle" @touchstart="startDragWeight('max', $event)" @touchmove="dragWeight('max', $event)" @touchend="endDrag"></view>
                </view>
                <view class="slider-values">
                  <text class="slider-min">30</text>
                  <text class="slider-max">100KG</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 弹框底部按钮 -->
        <view class="filter-footer">
          <view class="clear-btn" @click="resetFilters">
            <text>清空筛选</text>
          </view>
          <view class="confirm-btn" @click="confirmFilters">
            <text>确认</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app'
import { apiService, ApiService } from '/pages/utils/api.js'
import { useProjectStore } from '/stores/project.js'
import { objectToUrlParams } from '/pages/utils/url.js'
import { useUserStore } from '/pages/store/user.js'

const userStore = useUserStore()

const expandedIndex = ref(-1); // 当前展开的卡片索引，-1表示没有展开的卡片
const expandedActiveTab = ref('detail'); // 展开内容中当前选中的标签，默认为详情

// 标签栏相关状态
const activeTab = ref('etiquette'); // 当前选中的标签，默认为礼仪

// 筛选弹框相关状态
const showFilterModal = ref(false);
const filterModalClosing = ref(false); // 控制关闭动画
const showTagDropdown = ref(false);
const showFilterBar = ref(false); // 控制筛选条件栏显示

// 加载状态
const isLoading = ref(true);



// 滑块范围数据
const heightRange = ref({
  min: 160,
  max: 180
});

const weightRange = ref({
  min: 45,
  max: 60
});

// 拖拽状态
const dragging = ref({
  height: null, // 'min' or 'max'
  weight: null,
  startX: 0,
  startValue: 0
});

// 存储传递过来的参数
const pageParams = ref({})
const roleList = ref([])
// 使用项目store
const projectStore = useProjectStore()


const getCeshi = async () => {
  try {
    isLoading.value = true; // 开始加载
    
    const res = await apiService.getCeshi({
      userRowid: userStore.rowid
    })
    console.log('getCeshi:');
    console.log(JSON.parse(res.data));
    // 打印身份标签  示例：["带队","兼职"]
    //console.log(JSON.parse(JSON.parse(res.data)[0]['68b56ffc153a1d736d8593a2']));
    
    roleList.value = JSON.parse(res.data)
  } catch (error) {
    console.error('获取数据失败:', error)
  } finally {
    isLoading.value = false; // 加载完成
  }
}



// 页面加载时调用API
onLoad((options) => {
  console.log('人选页面加载完成', options)
  getCeshi()
})

// 页面显示时检查是否需要刷新数据
onShow(() => {
  console.log('简历库页面显示')
  // 检查是否有刷新标记
  const shouldRefresh = uni.getStorageSync('refreshResumeList')
  if (shouldRefresh) {
    console.log('检测到刷新标记，重新获取简历数据')
    getCeshi()
    // 清除刷新标记
    uni.removeStorageSync('refreshResumeList')
  }
})


const isAllSelected = ref(false);

const selectedCount = computed(() => {
  if(!roleList.value) return 0;
  return roleList.value.filter(item => item['68761720096a775fc5332e94'] == '已选中').length;
});

// 根据当前标签过滤角色列表
const filteredRoleList = computed(() => {
  if (!roleList.value) return [];
  
  // 根据标签过滤角色
  return roleList.value.filter(role => {
    try {
      // 获取角色的标签数组
      const roleTags = role['68b56ffc153a1d736d8593a2'];
      if (!roleTags) return false;
      
      const tags = JSON.parse(roleTags);
      if (!Array.isArray(tags)) return false;
      
      // 根据当前选中的标签进行过滤
      switch (activeTab.value) {
        case 'etiquette':
          return tags.includes('礼仪');
        case 'parttime':
          return tags.includes('兼职');
        case 'leader':
          return tags.includes('带队');
        default:
          return true;
      }
    } catch (e) {
      console.error('解析角色标签失败:', e);
      return false;
    }
  });
});



function toggleSelect(index) {
  if(!roleList.value) return;
  // 获取过滤后列表中的候选人
  const filteredCandidate = filteredRoleList.value[index];
  if (!filteredCandidate) return;
  
  // 在原始列表中找到对应的候选人并更新状态
  const originalIndex = roleList.value.findIndex(item => item === filteredCandidate);
  if (originalIndex !== -1) {
    roleList.value[originalIndex]['68761720096a775fc5332e94'] = 
      roleList.value[originalIndex]['68761720096a775fc5332e94'] == '已选中' ? '未选中' : '已选中';
  }
  checkAllSelected();
}

function toggleSelectAll() {
  if(!roleList.value) return;
  const newState = !isAllSelected.value;
  isAllSelected.value = newState;
  roleList.value.forEach(candidate => {
    candidate['68761720096a775fc5332e94'] = newState ? '已选中' : '未选中';
  });
}

function checkAllSelected() {
  if(!roleList.value) return;
  isAllSelected.value = roleList.value.every(candidate => candidate['68761720096a775fc5332e94'] == '已选中');
}

function toggleExpand(index) {
  expandedIndex.value = expandedIndex.value === index ? -1 : index;
  // 重置展开内容的标签页为详情
  if (expandedIndex.value !== -1) {
    expandedActiveTab.value = 'detail';
  }
}

// 切换展开内容的标签页
function switchExpandedTab(tab) {
  expandedActiveTab.value = tab;
}

// 检查是否有视频
function hasVideo(candidate) {
  const hasVid = candidate && candidate['688050b38c409b88b851973b'] && candidate['688050b38c409b88b851973b'].trim() !== '';
  console.log('检查视频数据:', {
    candidate: candidate ? '存在' : '不存在',
    videoField: candidate ? candidate['688050b38c409b88b851973b'] : '无',
    hasVideo: hasVid
  });
  return hasVid;
}

// 获取视频URL
function getVideoUrl(candidate) {
  if (!candidate || !candidate['688050b38c409b88b851973b']) {
    return '/static/logo.png'; // 默认图片
  }
  try {
    const videoData = JSON.parse(candidate['688050b38c409b88b851973b']);
    if (Array.isArray(videoData) && videoData.length > 0) {
      // 根据数据格式，直接返回URL字符串
      let videoUrl = videoData[0];
      
      // 处理URL中的转义字符
      if (videoUrl.includes('\\u003d')) {
        videoUrl = videoUrl.replace(/\\u003d/g, '=');
      }
      if (videoUrl.includes('\\u0026')) {
        videoUrl = videoUrl.replace(/\\u0026/g, '&');
      }
      
      console.log('处理后的视频URL:', videoUrl);
      return videoUrl;
    }
    return '/static/logo.png'; // 默认图片
  } catch (e) {
    console.error('解析视频数据失败', e);
    return '/static/logo.png'; // 默认图片
  }
}

// 获取照片列表
function getPhotos(candidate) {
  if (!candidate || !candidate['687633c7ef700e94a0d82b59']) return [];
  try {
    const photos = JSON.parse(candidate['687633c7ef700e94a0d82b59']);
    return Array.isArray(photos) ? photos : [];
  } catch (e) {
    console.error('解析照片数据失败', e);
    return [];
  }
}

// 获取模卡
function getModelCard(candidate) {
  if (!candidate || !candidate['688050b38c409b88b851973c']) return null;
  try {
    const modelCardData = JSON.parse(candidate['688050b38c409b88b851973c']);
    if (Array.isArray(modelCardData) && modelCardData.length > 0) {
      return modelCardData[0];
    }
    return null;
  } catch (e) {
    console.error('解析模卡数据失败', e);
    return null;
  }
}

// 获取单个照片的类名
function getPhotoClass(candidate, index) {
  const hasVid = hasVideo(candidate);
  const photoCount = getPhotos(candidate).length;
  
  if (hasVid) {
    if (photoCount <= 2) {
      return `video-photo-${index}`;
    } else {
      // 有视频且照片超过2张时的布局
      if (index < 2) {
        return `video-side-${index}`;
      } else {
        return `video-bottom-${index-2}`;
      }
    }
  } else {
    if (photoCount === 1) return 'single';
    if (photoCount === 2) return `dual-${index}`;
    if (photoCount === 3) return `triple-${index}`;
    return `grid-item`;
  }
}

function photoError(e) {
  console.error('照片加载错误', e);
  uni.showToast({
    title: '照片加载失败',
    icon: 'none'
  });
}

function modelCardError(e) {
  console.error('模卡加载错误', e);
  uni.showToast({
    title: '模卡加载失败',
    icon: 'none'
  });
}

// 预览图片
function previewImage(current, urls) {
  if (!current || !urls || urls.length === 0) {
    uni.showToast({
      title: '图片加载失败',
      icon: 'none'
    });
    return;
  }
  
  // 过滤掉无效的URL
  const validUrls = urls.filter(url => url && url.trim() !== '');
  
  if (validUrls.length === 0) {
    uni.showToast({
      title: '没有可预览的图片',
      icon: 'none'
    });
    return;
  }
  
  // 找到当前图片在数组中的索引
  const currentIndex = validUrls.findIndex(url => url === current);
  const startIndex = currentIndex >= 0 ? currentIndex : 0;
  
  uni.previewImage({
    current: current,
    urls: validUrls,
    indicator: 'number',
    loop: true,
    fail: (err) => {
      console.error('预览图片失败:', err);
      uni.showToast({
        title: '预览失败',
        icon: 'none'
      });
    }
  });
}

// 获取布局类名
function getLayoutClass(candidate) {
  const hasVid = hasVideo(candidate);
  const photoCount = getPhotos(candidate).length;
  
  if (hasVid) {
    if (photoCount <= 2) {
      return 'has-video-few-photos';
    } else {
      return 'has-video-many-photos';
    }
  } else {
    if (photoCount === 0) return 'no-photos';
    if (photoCount === 1) return 'single-photo';
    if (photoCount === 2) return 'two-photos';
    if (photoCount === 3) return 'three-photos';
    return 'many-photos';
  }
}

function videoError(e) {
  console.error('视频播放错误', e);
  uni.showToast({
    title: '视频加载失败',
    icon: 'none'
  });
}

function videoLoad(e) {
  console.log('视频加载成功', e);
}

// 计算属性 - 滑块样式
const heightRangeStyle = computed(() => {
  const minPercent = ((heightRange.value.min - 100) / (300 - 100)) * 100;
  const maxPercent = ((heightRange.value.max - 100) / (300 - 100)) * 100;
  return {
    left: `${minPercent}%`,
    width: `${maxPercent - minPercent}%`
  };
});

const heightMinThumbStyle = computed(() => {
  const percent = ((heightRange.value.min - 100) / (300 - 100)) * 100;
  return {
    left: `${percent}%`
  };
});

const heightMaxThumbStyle = computed(() => {
  const percent = ((heightRange.value.max - 100) / (300 - 100)) * 100;
  return {
    left: `${percent}%`
  };
});

const weightRangeStyle = computed(() => {
  const minPercent = ((weightRange.value.min - 30) / (100 - 30)) * 100;
  const maxPercent = ((weightRange.value.max - 30) / (100 - 30)) * 100;
  return {
    left: `${minPercent}%`,
    width: `${maxPercent - minPercent}%`
  };
});

const weightMinThumbStyle = computed(() => {
  const percent = ((weightRange.value.min - 30) / (100 - 30)) * 100;
  return {
    left: `${percent}%`
  };
});

const weightMaxThumbStyle = computed(() => {
  const percent = ((weightRange.value.max - 30) / (100 - 30)) * 100;
  return {
    left: `${percent}%`
  };
});

// 筛选弹框相关函数
function closeFilterModal() {
  filterModalClosing.value = true;
  setTimeout(() => {
    showFilterModal.value = false;
    filterModalClosing.value = false;
  }, 300); // 与动画时长保持一致
}

// 切换标签
function switchTab(tab) {
  activeTab.value = tab;
  console.log('切换到标签:', tab);
  console.log('过滤后的角色数量:', filteredRoleList.value.length);
}

// 身高滑块拖拽
function startDragHeight(type, event) {
  dragging.value.height = type;
  dragging.value.startX = event.touches[0].clientX;
  dragging.value.startValue = heightRange.value[type];
}

function dragHeight(type, event) {
  if (dragging.value.height !== type) return;
  
  const currentX = event.touches[0].clientX;
  const deltaX = currentX - dragging.value.startX;
  const sliderWidth = 280; // 滑块轨道宽度
  const valueRange = 300 - 100; // 数值范围
  const deltaValue = (deltaX / sliderWidth) * valueRange;
  
  let newValue = Math.round(dragging.value.startValue + deltaValue);
  newValue = Math.max(100, Math.min(300, newValue));
  
  if (type === 'min') {
    newValue = Math.min(newValue, heightRange.value.max - 1);
    heightRange.value.min = newValue;
  } else {
    newValue = Math.max(newValue, heightRange.value.min + 1);
    heightRange.value.max = newValue;
  }
}

// 体重滑块拖拽
function startDragWeight(type, event) {
  dragging.value.weight = type;
  dragging.value.startX = event.touches[0].clientX;
  dragging.value.startValue = weightRange.value[type];
}

function dragWeight(type, event) {
  if (dragging.value.weight !== type) return;
  
  const currentX = event.touches[0].clientX;
  const deltaX = currentX - dragging.value.startX;
  const sliderWidth = 280; // 滑块轨道宽度
  const valueRange = 100 - 30; // 数值范围
  const deltaValue = (deltaX / sliderWidth) * valueRange;
  
  let newValue = Math.round(dragging.value.startValue + deltaValue);
  newValue = Math.max(30, Math.min(100, newValue));
  
  if (type === 'min') {
    newValue = Math.min(newValue, weightRange.value.max - 1);
    weightRange.value.min = newValue;
  } else {
    newValue = Math.max(newValue, weightRange.value.min + 1);
    weightRange.value.max = newValue;
  }
}

function endDrag() {
  dragging.value.height = null;
  dragging.value.weight = null;
}

function resetFilters() {
  heightRange.value = { min: 160, max: 180 };
  weightRange.value = { min: 45, max: 60 };
  // 重置后显示所有数据
  candidates.value = allCandidates.value;
  showFilterBar.value = false; // 隐藏筛选条件栏
}

function confirmFilters() {
  console.log('筛选条件:', {
    height: heightRange.value,
    weight: weightRange.value
  });
  
  // 根据身高和体重筛选候选人数据
  if (allCandidates.value) {
    const filteredCandidates = allCandidates.value.filter(candidate => {
      // 获取身高数据 (字段ID: 686e0f429104eb90ad4247a5)
      const height = parseInt(candidate['686e0f429104eb90ad4247a5']);
      // 获取体重数据 (字段ID: 686e0f429104eb90ad4247a6)
      const weight = parseInt(candidate['686e0f429104eb90ad4247a6']);
      
      // 检查身高是否在范围内
      const heightInRange = !isNaN(height) && height >= heightRange.value.min && height <= heightRange.value.max;
      // 检查体重是否在范围内
      const weightInRange = !isNaN(weight) && weight >= weightRange.value.min && weight <= weightRange.value.max;
      
      return heightInRange && weightInRange;
    });
    
    candidates.value = filteredCandidates;
    console.log(`筛选完成，从${allCandidates.value.length}个候选人中筛选出${filteredCandidates.length}个符合条件的候选人`);
    showFilterBar.value = true; // 显示筛选条件栏
  }
  
  closeFilterModal();
}

// 跳转到添加简历页面
function goToQuotation() {
  uni.navigateTo({
    url: '/pages/tabs/profile/addResume'
  });
}
</script>

<style lang="scss" scoped>

.candidate-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 10px;
  padding-bottom: 80px; /* 为固定底部留出空间 */
  box-sizing: border-box;
  
  /* 加载动画样式 */
  .loading-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }

  .loading-container {
    background: #FFFFFF;
    border-radius: 24rpx;
    padding: 48rpx 64rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  }

  .loading-spinner {
    width: 64rpx;
    height: 64rpx;
    border: 6rpx solid #F0F0F0;
    border-top: 6rpx solid #FF6B9B;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 24rpx;
  }

  .loading-text {
    font-size: 28rpx;
    color: #333333;
    font-weight: 500;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    }
  
  .tab-bar {
    display: flex;
    background-color: #f9f8fd;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
    
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background-color: #f6aad0;
    }
    
    .tab-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 15px 0;
      position: relative;
      cursor: pointer;
      transition: all 0.3s ease;
      
      text {
        font-size: 14px;
        color: #666;
        font-weight: 500;
        transition: color 0.3s ease;
      }
      
      &.active {
        text {
          color: #ed64a9;
          font-weight: 600;
        }
        
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 30px;
          height: 2px;
          background-color: #ed64a9;
          border-radius: 1px;
        }
      }
      
      &:hover:not(.active) {
        text {
          color: #ed64a9;
        }
      }
    }
  }
  
  .filter-bar {
    position: fixed;
    bottom: 80px; /* 在footer上方 */
    left: 0;
    right: 0;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    
    .filter-bar-text {
      color: #fff;
      font-size: 14px;
      text-align: center;
    }
  }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    
    .count {
      font-size: 12px;
      color: #333;
    }
    
    .select-all-btn {
      background-color: #ffffff;
      color: #ea4096;
      font-size: 12px;
      padding: 3px 12px;
      border-radius: 6px;
      border: 1px solid #f7bfdc;
    }
  }
  
  .candidate-list {
    flex: 1;
    
    .candidate-card {
      position: relative;
      background-color: #fff8fc;
      border-radius: 8px;
      padding: 12px;
      margin-bottom: 8px;
      display: flex;
      flex-direction: column;
      box-shadow: 0 2px 8px rgba(255, 106, 156, 0.1);
      border: 1px solid #f9cde3;
      transition: all 0.3s ease;
      
      &.expanded {
        margin-bottom: 20px;
      }
      
      .card-content {
        display: flex;
        
        .avatar {
          width: 50px;
          height: 50px;
          border-radius: 10px;
          margin-right: 12px;
        }
        
        .info {
          flex: 1;
          
          .name-gender {
            display: flex;
            align-items: center;
            margin-bottom: 4px;
            
            .name {
              font-size: 14px;
              font-weight: 500;
              color: #333;
              margin-right: 4px;
            }
            
            .gender {
              font-size: 15px;
              padding: 0 4px;
              &.male {
                color: #4a90e2; /* 男性性别颜色 */
              }
              &.female {
                color: #ff6a9c;
              }
            }
          }
          
          .location {
            display: flex;
            font-size: 12px;
            color: #666;
            
            .job {
              margin-right: 4px;
            }
            
            .separator {
              margin: 0 4px;
              color: #ccc;
            }
          }
        }
      }
      
      .expanded-content {
        margin-top: 12px;
        
        .divider {
          height: 1px;
          background-color: #f0f0f0;
          margin: 8px 0;
        }
        
        // 展开内容标签栏
        .expanded-tab-bar {
          display: flex;
          background-color: #f9f8fd;
          border-radius: 8px;
          margin-bottom: 12px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
          position: relative;
          
          .expanded-tab-item {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 12px 0;
            position: relative;
            cursor: pointer;
            transition: all 0.3s ease;
            
            text {
              font-size: 13px;
              color: #666;
              font-weight: 500;
              transition: color 0.3s ease;
            }
            
            &.active {
              text {
                color: #ed64a9;
                font-weight: 600;
              }
              
              &::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 25px;
                height: 2px;
                background-color: #ed64a9;
                border-radius: 1px;
              }
            }
            
            &:hover:not(.active) {
              text {
                color: #ed64a9;
              }
            }
          }
        }
        
        .expanded-tab-content {
          // 标签页内容样式
          
          // 模卡容器样式
          .model-card-container {
            width: 100%;
            
            .model-card-image {
              width: 100%;
              height: 400px;
              border-radius: 8px;
              object-fit: cover;
              cursor: pointer;
              transition: transform 0.2s ease;
              
              &:hover {
                transform: scale(1.02);
              }
            }
            
            .no-model-card {
              width: 100%;
              height: 200px;
              display: flex;
              align-items: center;
              justify-content: center;
              background-color: #f5f5f5;
              border-radius: 8px;
              
              text {
                color: #999;
                font-size: 14px;
              }
            }
          }
        }
        
        // 为所有照片添加点击样式
        .photos .photo-item {
          cursor: pointer;
          transition: transform 0.2s ease;
          
          &:hover {
            transform: scale(1.02);
          }
        }
        
        // 优化视频显示
        .video-container {
          background-color: #000;
          
          video {
            object-fit: cover;
            background-color: #000;
          }
        }
        
        .section {
          margin-top: 12px;
          
          .section-title {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            
            .section-title-bar {
              width: 2px;
              height: 14px;
              background-color: #ff6a9c;
              margin-right: 6px;
              border-radius: 1px;
            }
            
            text {
              font-size: 14px;
              color: #333;
              font-weight: 500;
            }
          }
          
          .physical-info {
            display: flex;
            justify-content: space-between;
            
            .info-item {
              display: flex;
              flex-direction: column;
              align-items: center;
              
              .info-value {
                font-size: 14px;
                color: #333;
                margin-bottom: 4px;
              }
              
              .info-label {
                font-size: 10px;
                color: #999;
                background-color: #f5f5f5;
                padding: 2px 6px;
                border-radius: 8px;
              }
            }
          }
          
          .tags {
            display: flex;
            flex-wrap: wrap;
            
            .tag {
              background-color: #fff;
              border: 1px solid #ddd;
              border-radius: 3px;
              padding: 4px 10px;
              margin-right: 8px;
              margin-bottom: 8px;
              font-size: 12px;
              color: #333;
            }
            .no-tags {
              font-size: 12px;
              color: #999;
              margin-top: 8px;
            }
          }
          
          .photos {
            display: flex;
            flex-direction: column;
            width: 100%;
            
            // 有视频的布局
            &.has-video {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              
              .video-container {
                width: 62%;
                height: 300px;
                border-radius: 8px;
                overflow: hidden;
                
                video {
                  width: 100%;
                  height: 100%;
                  border-radius: 8px;
                  background-color: #000;
                }
              }
              
              .photo-container {
                width: 35%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                
                .photo-item {
                  width: 100%;
                  height: 145px;
                  border-radius: 8px;
                  margin-bottom: 10px;
                  
                  &:last-child {
                    margin-bottom: 0;
                  }
                }
              }
            }
            
            // 单张照片的布局
            &.single-photo {
              .photo-container {
                width: 100%;
                
                .photo-item {
                  width: 100%;
                  height: 300px;
                  border-radius: 8px;
                }
              }
            }
            
            // 两张照片的布局
            &.two-photos {
              .photo-container {
                width: 100%;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                
                .photo-item {
                  width: 49%;
                  height: 300px;
                  border-radius: 8px;
                }
              }
            }
            
            // 三张照片的布局
            &.three-photos {
              .photo-container {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                
                .photo-item {
                  border-radius: 8px;
                  
                  &.triple-0 {
                    width: 100%;
                    height: 200px;
                    margin-bottom: 10px;
                  }
                  
                  &.triple-1, &.triple-2 {
                    width: 49%;
                    height: 150px;
                  }
                }
              }
            }
            
            // 多张照片的布局
            &.many-photos {
              .photo-container {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                
                .photo-item {
                  width: 32%;
                  height: 120px;
                  border-radius: 8px;
                  margin-bottom: 10px;
                }
              }
            }
            
            // 无照片的布局
            &.no-photos {
              .photo-container {
                width: 100%;
                height: 200px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #f5f5f5;
                border-radius: 8px;
                
                .no-photo {
                  color: #999;
                  font-size: 14px;
                }
              }
            }

            // 有视频且照片较少的布局（2张或以下）
            &.has-video-few-photos {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              
              .video-container {
                width: 62%;
                height: 300px;
                border-radius: 8px;
                overflow: hidden;
                
                video {
                  width: 100%;
                  height: 100%;
                  border-radius: 8px;
                  background-color: #000;
                }
              }
              
              .photo-container {
                width: 35%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                
                .photo-item {
                  width: 100%;
                  height: 145px;
                  border-radius: 8px;
                  margin-bottom: 10px;
                  
                  &:last-child {
                    margin-bottom: 0;
                  }
                }
              }
            }
            
            // 有视频且照片较多的布局（3张或以上）
            &.has-video-many-photos {
              display: flex;
              flex-direction: column;
              
              .video-container {
                width: 100%;
                height: 240px;
                border-radius: 8px;
                overflow: hidden;
                margin-bottom: 10px;
                
                video {
                  width: 100%;
                  height: 100%;
                  border-radius: 8px;
                  background-color: #000;
                }
              }
              
              .photo-container {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                
                // 视频下方的照片网格
                .photo-item {
                  width: 32%;
                  height: 100px;
                  border-radius: 8px;
                  margin-bottom: 10px;
                }
              }
            }
          }
          
          .collapse-btn {
            opacity: 0;
            text-align: center;
            margin-top: 12px;
            color: #ff6a9c;
            font-size: 12px;
          }
        }
      }
      
      .expand-btn {
        background-color: #ffffff;
        position: absolute;
        bottom: 12px;
        right: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 3px 8px;
        border: 1px solid #d5d2d4;
        border-radius: 12px;
        color: #6675a3;
        font-size: 12px;
        
        .icon-down {          width: 12px;
          height: 12px;
          margin-right: 3px;
        }
        
        /* 收起状态样式 */
        &.collapsed {
          border-color: #eb4197;
          color: #eb4197;
          box-shadow: 0 2px 8px rgba(235, 65, 151, 0.2);
          position: fixed;
          bottom: 120px;
          right: 20px;
          z-index: 999;
        }
      }
      
      .checkbox {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 1px solid #ddd;
        
        &.checked {
          background-color: #ff6a9c;
          border: none;
          display: flex;
          align-items: center;
          justify-content: center;
          
          .icon-check {
            color: #fff;
            font-size: 12px;
          }
        }
      }
    }
  }
  
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    padding: 15px 10px;
    background-color: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    
    .filter-btn {
      flex: 1;
      height: 45px;
      border: 1px solid #ddd;
      border-radius: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      margin-right: 10px;
      font-size: 16px;
      color: #333;
    }
    
    .recommend-btn {
      flex: 1;
      height: 45px;
      background-color: #ff6a9c;
      border-radius: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      color: #fff;
    }
  }

  .filter-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease-in-out;
    
    &.closing {
      animation: fadeOut 0.3s ease-in-out;
    }

    .filter-content {
      background-color: #fff;
      border-radius: 15px 15px 0 0;
      width: 100%;
      max-height: 70vh;
      box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.2);
      display: flex;
      flex-direction: column;
      animation: slideUp 0.3s ease-out;
      
      &.closing {
        animation: slideDown 0.3s ease-in;
      }

      .filter-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        border-bottom: 1px solid #eee;

        .filter-title {
          font-size: 20px;
          font-weight: bold;
          color: #333;
        }

        .close-btn {
          font-size: 28px;
          color: #999;
          padding: 5px;
          width: 30px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 15px;
          
          &:hover {
            background-color: #f5f5f5;
          }
        }
      }

      .filter-body {
        padding: 15px 20px;
        flex-grow: 1;

        // 标签筛选区
        .tag-filter-section {
          margin-bottom: 15px;
          
          .tag-filter-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            
            .tag-filter-title {
              font-size: 16px;
              color: #333;
              font-weight: normal;
            }
            
            .tag-dropdown-container {
              display: flex;
              align-items: center;
              cursor: pointer;
              
              .tag-dropdown-btn {
                background-color: transparent;
                border: 1px solid #f29cc8;
                border-radius: 8px;
                padding: 6px 12px;
                
                .tag-dropdown-text {
                  color: #eb4196;
                  font-size: 14px;
                }
              }
              
              .tag-dropdown-arrow {
                width: 18px;
                height: 18px;
                margin-left: 8px;
              }
            }
          }
        }
        
        // 分隔线
        .filter-divider {
          height: 1px;
          background-color: #f0f0f0;
          margin: 15px 0;
        }
        
                 // 条件筛选区
         .condition-filter-section {
           .condition-filter-title {
             font-size: 14px;
             color: #333;
             font-weight: normal;
             text-align: left;
             display: block;
             margin-bottom: 10px;
           }
           
           .slider-section {
             margin-bottom: 15px;
             
             .slider-header {
               margin-bottom: 8px;
               
               .slider-label {
                 font-size: 14px;
                 color: #333;
                 font-weight: normal;
                 margin-bottom: 5px;
               }
               
               .slider-value {
                 font-size: 14px;
                 color: #333;
                 font-weight: normal;
                 text-align: center;
                 display: block;
               }
             }
             
             .slider-container {
               display: flex;
               flex-direction: column;
               
               .slider-wrapper {
                 height: 25px;
                 position: relative;
                 margin: 0 15px;
                 display: flex;
                 align-items: center;
                 
                 .slider-track {
                   position: absolute;
                   top: 50%;
                   left: 0;
                   right: 0;
                   height: 2px;
                   background-color: #e0e0e0;
                   transform: translateY(-50%);
                 }
                 
                 .slider-range {
                   position: absolute;
                   top: 50%;
                   height: 2px;
                   background-color: #ff6a9c;
                   transform: translateY(-50%);
                 }
                 
                 .slider-thumb {
                   position: absolute;
                   top: 50%;
                   width: 18px;
                   height: 18px;
                   background-color: #ff6a9c;
                   border: 1px solid #ff6a9c;
                   border-radius: 50%;
                   box-sizing: border-box;
                   padding: 3px;
                   transform: translate(-50%, -50%);
                   cursor: pointer;
                   transition: all 0.2s ease;
                   
                   &:hover {
                     transform: translate(-50%, -50%) scale(1.1);
                   }
                   
                   &:active {
                     transform: translate(-50%, -50%) scale(1.2);
                   }
                 }
               }
               
               .slider-values {
                 display: flex;
                 justify-content: space-between;
                 padding: 5px 15px 0;
                 
                 .slider-min, .slider-max {
                   font-size: 14px;
                   color: #666;
                 }
               }
             }
           }
         }
      }

      .filter-footer {
        display: flex;
        justify-content: space-between;
        padding: 8px 20px 15px 20px;
        border-top: none;

        .clear-btn, .confirm-btn {
          flex: 1;
          height: 40px;
          border-radius: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          cursor: pointer;
          transition: all 0.2s ease;
          border: none;

          &:hover {
            opacity: 0.9;
          }
        }

        .clear-btn {
          background-color: #fff;
          color: #333;
          border: 1px solid #a6a6a6;
          margin-right: 10px;
        }

        .confirm-btn {
          background-color: #ff6a9c;
          color: #fff;
          margin-left: 10px;
        }
      }
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}
</style>

